<template>
	<view class="back-view" @touchmove.stop.prevent="moveHandle">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">修改服务权益</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../static/close.png"></image>
				</view>
			</view>
			<view class="top-line"></view>
			<scroll-view class="center-back" scroll-y="true" style="width: 100%;">
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<uni-forms-item label="服务有效期：" labelWidth="200" labelAlign="right" required>
						<view class="item-back1">
							<uni-easyinput type="number" v-model="baseFormData.totalDay" placeholder="请填写" />
							<view class="itwm-back-des">天</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="可发起总咨询数：" labelWidth="200" labelAlign="right" required>
						<view class="item-back2">
							<uni-easyinput type="number" @input='consultCountChange' v-model="baseFormData.totalCount"
								placeholder="请填写" />
							<view class="itwm-back-des">次</view>
							<uni-data-checkbox multiple v-model="limit" :localdata="limitArr" @change="limitChange">
							</uni-data-checkbox>
						</view>
					</uni-forms-item>
					<uni-forms-item label="限制每：" labelWidth="200" labelAlign="right">
						<view class="item-back">
							<view class="item-back3">
								<uniselect v-model="baseFormData.cycleUnit" :localdata="typeRange" @change="typeChange"
									:clear="false">
								</uniselect>
							</view>
							<view class="itwm-back-des">只可咨询</view>
							<view class="item-back-width">
								<uni-easyinput :type='number' v-model="baseFormData.cycleTimes" placeholder="请填写" />
							</view>
							<view class="itwm-back-des">次</view>
						</view>
					</uni-forms-item>

					<uni-forms-item label="可咨询领域：" labelWidth="200" labelAlign="right" required>
						<view class="item-back4">
							<selectxy  :zindex=399 selectType='reject' ref="selectxy" :value="multipleArr" placeholder="咨询领域"
								:options="rangeList" @change="multipleChange">
							</selectxy>
						</view>
					</uni-forms-item>
				</uni-forms>
			</scroll-view>
			<view class="bottom-back">
				<view class="bottom-btn bottom-btn-cancel" @click="closeBtnAction">取消</view>
				<view class="bottom-btn" @click="submitAction">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniselect from "@/packageB/PC/components/uni-data-select/uni-data-select.vue"
	import selectxy from "@/components/select-cy/select-cy.vue"

	export default {
		components: {
			uniselect,
			selectxy
		},
		props: {
			itemID: {
				type: String,
				default: ''
			},


			rangeList: {
				type: Array,
				default: [],
			}
		},
		data() {
			return {
				showMask: false,

				baseFormData: {
					'id': '',
					'totalDay': '',
					'totalCount': '',
					'cycleUnit': '',
					'cycleTimes': '',

				},
				imgArr: [],
				limit: [],
				limitArr: [{
					text: '无限制',
					value: -1
				}],
				typeRange: [{
						value: '0',
						text: "周"
					},
					{
						value: '1',
						text: "月"
					},
				],
				status: true,
				multipleArr: [],
				selectArr: [],
			}
		},

		mounted() {
			this.requestInfoData();
		},
		methods: {

			submitAction() {
				console.log(this.baseFormData)
				this.requestData()
			},

			//咨询领域
			multipleChange(item, value) {
				console.log('咨询领域' + item, value);
				this.selectArr = item;
				this.multipleArr = value;
				this.baseFormData.domainDict = value;
			},

			//网络请求示例
			async requestData() {
				let _this = this

				var jsInt = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字
				var jsPosInt = /^[1-9]+[0-9]*]*$/; //判断正整数
				if (!this.baseFormData.totalDay) {
					uni.showToast({
						title: '请填写服务有效期',
						icon: 'none'
					})
					return;
				}

				if (this.limit.length == 0) {
					console.log(this.limit)
					if (!this.baseFormData.totalCount) {
						uni.showToast({
							title: '请填写可咨询数量',
							icon: 'none'
						})
						return;
					}
					if (!jsPosInt.test(this.baseFormData.totalCount)) {
						uni.showToast({
							title: '可咨询数量必须为数字',
							icon: 'none'
						})
						return;
					}
				}

				if (_this.selectArr.length == 0) {
					uni.showToast({
						title: '请选择咨询领域',
						icon: 'none'
					})
					return;
				}
				var dicStr = '';
				for (var i = 0; i < _this.selectArr.length; i++) {

					if (i == 0) {
						dicStr = _this.selectArr[i].value
					} else {
						dicStr += "," + _this.selectArr[i].value
					}
				}
				var parms = {
					'id': this.baseFormData.id,
					'totalDay': parseInt(this.baseFormData.totalDay),
					'domainDict': dicStr,
					'totalCount': this.baseFormData.totalCount ? parseInt(this.baseFormData.totalCount) : -1,
					'cycleUnit': this.baseFormData.cycleUnit != '' ? parseInt(this.baseFormData.cycleUnit) : '',
					'cycleTimes': this.baseFormData.cycleTimes ? parseInt(this.baseFormData.cycleTimes) : ''
				}
				console.log(parms)
				var url = "/admin/customerRights";
				const res = await this.$myRequest({
					url: url,
					method: 'PUT',
					data: parms
				})
				console.log('返回结果', res)

				if (res.data.code == 200) {
					uni.showToast({
						title: '修改成功'
					})
					_this.$emit("successBack");
					_this.closeBtnAction()
				}
			},
			//信息网络请求
			async requestInfoData() {
				let _this = this
				const res = await this.$myRequest({
					url: '/admin/customerRights/' + this.itemID,
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.baseFormData = res.data.data;
					if (_this.baseFormData.totalCount == -1) {
						_this.baseFormData.totalCount = '';
						_this.limit = [-1];
					}
					console.log('都很健康' + _this.baseFormData.cycleUnit)

					_this.multipleArr = _this.baseFormData.domainDict.split(',');
					for (var i = 0; i < _this.multipleArr.length; i++) {
						var name = _this.multipleArr[0];
						if (name == '-1') {
							name = '不限';
							_this.multipleArr.splice(i, 1, name)
						}

						for (var j = 0; j < _this.rangeList.length; j++) {
							var item = _this.rangeList[j];
							if (item.name == name) {
								_this.selectArr.push(item)
							}
						}
					}

					console.log('是都好几次' + _this.multipleArr);

					_this.$refs.selectxy.likeSuccess(_this.multipleArr, _this.rangeList);
					if (res.data.data.cycleUnit) {
						_this.$set(_this.baseFormData, 'cycleUnit', res.data.data.cycleUnit.code)
					}
					_this.$set(_this.baseFormData, 'price', (res.data.data.price / 100).toFixed(2))
					console.log('数据库' + _this.baseFormData.cycleUnit)
				}
			},

			//改变状态
			async switchChange(e) {
				console.log(e)
				this.status = e.detail.value;
			},




			//总咨询次数变化
			consultCountChange(e) {
				console.log(e)
				if (e) {
					this.limit = [];
				}
			},

			//限制每
			typeChange(e) {
				console.log(e)
				this.baseFormData.cycleUnit = e;
			},
			//无限制
			limitChange(e) {
				console.log(e)
				if (e.detail.value[0] == -1) {
					this.baseFormData.totalCount = '';
				}
				console.log(this.limit)
			},

			tapMask() {
				this.showMask = false
			},

			closeBtnAction() {
				this.$emit('serveEditClose')
			},
			moveHandle() {
				return true
			},
		},
	}
</script>

<style>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 8;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.white-view-back {
		width: 600px;
		height: 400px;
		padding: 24px;
		max-height: 400px;
		background-color: white;
		margin-top: -50px;
		border-radius: 4px;
		z-index: 10;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		font-size: 18px;
		font-weight: normal;
		color: #333333;

	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	/* 
中间高度=总高 600- 20-21 - 20-60 + 14
 */
	.center-back {
		width: 100%;
		max-height: 492px;
		height: 492px;
	}

	.bottom-back {
		bottom: 0px;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		height: 60px;
		right: 16px;
	}

	.bottom-btn {
		cursor: pointer;
		width: 104px;
		height: 32px;
		background: #2DA9C5;
		border-radius: 2px;
		color: #FFFFFF;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottom-btn-cancel {
		margin-right: 10px;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		color: #333333;
	}

	.item-back {
		width: 450px;
		display: flex;
		align-items: center;
	}

	.item-back1 {
		display: flex;
		width: 100px;
		align-items: center;
	}

	.item-back2 {
		display: flex;
		width: 350px;
		align-items: center;
	}

	.item-back3 {
		width: 100px;
	}

	.item-back4 {
		width: 250px;
	}

	.item-back5 {
		width: 480px;
		border: 1px solid #eee;
		border-radius: 5px;
	}

	.itwm-back-des {
		font-size: 14px;
		margin-left: 8px;
		color: #666666;
		margin-right: 8px;
	}

	.item-back-width {
		width: 80px;
		margin-right: 10px;
	}

	.customer-item {
		display: flex;
		margin-top: 8px;
		align-items: center;

	}

	.customer-back {
		min-width: 168px;
		height: 44px;
		background: #E8F7FB;
		border-radius: 4px;
		display: flex;
		align-items: center;
		margin-right: 10px;
	}

	.customer-img {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin-left: 8px;
	}

	.customer-name {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 2px;
	}

	.customer-phone {
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-left: 4px;
	}

	.customer-close {
		width: 16px;
		height: 16px;
		margin-right: 2px;
		margin-left: auto;
	}

	.customer-item-back {
		display: flex;
		flex-wrap: wrap;

	}

	.selectLaw {
		font-size: 14px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		padding: 6px 10px;
		position: relative;
		flex-direction: row;
		align-items: center;
		z-index: 20;
		background-color: white;
	}

	.law-item-back {
		background-color: white;
	}

	.selectLaw-list {
		margin-top: 2px;
		position: absolute;
		width: 445px;
		height: 130px;
		z-index: 22221;
		background-color: white;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.2000);
		border-radius: 2px;
	}

	.mask-view {
		position: absolute;
		width: 100vw;
		height: 100vh;
		z-index: 19;
		background-color: rgba(0, 0, 0, 0.0);
		top: -600px;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.pop-content-back {
		height: 120px;
		margin-left: 20px;
		width: 420px;
		margin-top: 10px;
	}

	.pop-content-list {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.item-des {
		color: #aaa;
		margin-top: 5px;
		font-size: 12px;
	}
</style>
